<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>集群总数</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ stats.clusters }}</h2>
            <el-icon><Connection /></el-icon>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>节点总数</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ stats.nodes }}</h2>
            <el-icon><Monitor /></el-icon>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>实例总数</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ stats.instances }}</h2>
            <el-icon><Cpu /></el-icon>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>资源使用率</span>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ stats.resourceUsage }}%</h2>
            <el-icon><DataLine /></el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in recentActivities"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统状态</span>
            </div>
          </template>
          <div ref="chartRef" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Connection, Monitor, Cpu, DataLine } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { useCloudStore } from '../stores/cloud'

const store = useCloudStore()
const chartRef = ref(null)
let chart = null

const stats = ref({
  clusters: 0,
  nodes: 0,
  instances: 0,
  resourceUsage: 0
})

const recentActivities = ref([
  {
    content: '创建了新的集群 "Production Cluster"',
    time: '2024-03-15 10:00:00',
    type: 'success'
  },
  {
    content: '节点 "node-1" 状态变更为运行中',
    time: '2024-03-15 09:30:00',
    type: 'primary'
  },
  {
    content: '实例 "web-server-1" 资源使用率超过阈值',
    time: '2024-03-15 09:00:00',
    type: 'warning'
  }
])

onMounted(async () => {
  await store.fetchClusters()
  stats.value.clusters = store.clusters.length
  
  // 初始化图表
  chart = echarts.init(chartRef.value)
  const option = {
    title: {
      text: '资源使用趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'CPU使用率',
        type: 'line',
        data: [30, 40, 35, 50, 49, 60, 70]
      },
      {
        name: '内存使用率',
        type: 'line',
        data: [40, 45, 50, 55, 60, 65, 70]
      }
    ]
  }
  chart.setOption(option)
})
</script>

<style scoped>
.home {
  padding: 20px;
}

.stat-card {
  height: 160px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.card-content h2 {
  margin: 0;
  font-size: 36px;
  color: #409EFF;
}

.mt-20 {
  margin-top: 20px;
}
</style> 